<template>
  <div id="teamAddPage">
    <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="addTeamData.name"
          name="name"
          label="队伍名称"
          placeholder="请输入队伍名称"
          :rules="[{ required: true, message: '请填写名称' }]"
      />
      <van-field
          v-model="addTeamData.description"
          rows="4"
          autosize
          label="队伍描述"
          type="textarea"
          placeholder="请输入队伍描述"
        />
      <van-field
          v-model="addTeamData.expireTime"
          is-link
          readonly
          name="datePicker"
          label="过期时间"
          placeholder="点击选择时间"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-date-picker
            :model-value="pickerValue"
            :min-date="new Date()"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>

      <van-field name="stepper" label="最大人数">
        <template #input>
          <van-stepper v-model="addTeamData.maxNum" max="30" min="3" />
        </template>
      </van-field>
      <van-field name="radio" label="队伍状态">
        <template #input>
          <van-radio-group v-model="addTeamData.status" direction="horizontal">
            <van-radio name="0">公开</van-radio>
            <van-radio name="1">私有</van-radio>
            <van-radio name="2">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
          v-if= "Number(addTeamData.status)===2"
          v-model="addTeamData.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
    </van-form>
  </div>

</template>

<script setup lang="ts">

import {ref} from "vue";
import myAxios from "../plugins/myAxios.js";
import {showFailToast, showSuccessToast} from "vant";
import {useRouter} from "vue-router";
const router = useRouter();

//初始表单数据
const initForData={
  "description": "",
  "expireTime":"",
  "maxNum": 0,
  "name": "",
  "password": "",
  "status": 0
}

/**
 * ref(initDta) 如果这么写的话 addTeamData修改了 initData的数据也会被修改
 */
const addTeamData=ref({...initForData})

//过期时间参数
const showPicker = ref(false);
const pickerValue = ref([]);
const onConfirm = ({ selectedValues }) => {
  addTeamData.value.expireTime = selectedValues.join('-');
  pickerValue.value = selectedValues;
  showPicker.value = false;
};


//调用后端接口提交
const onSubmit=async ()=>{
  const postData={
    ...addTeamData.value,
    status: Number(addTeamData.value.status)
  }

  const res=await myAxios.post("/team/add",postData)

  if (res?.code === 0 && res.data){
    showSuccessToast("创建成功")
    //跳转到队伍页面(这样返回就不会再回到添加页面了 避免重复添加)
   await router.replace("/team")
  }else {
    showFailToast("创建失败")
  }
}
</script>

<style scoped>

</style>